<template>
	<view class="package space-between">
		<view v-for="(item,index) in list" :key="index" class="pross">
			<view class="column item">
				<image :src="state>index?item.icons:item.icon"></image>
			    <text :style="{color:state>index?'#FE8C8C':''}">{{item.name}}</text>
			</view>
			<view class="Dotted" :style="{display:index=='3'?'none':'',borderBlockColor:state>index?'#FE8C8C':''}"></view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
	  state: { type: String },
	});
	const list=[{name:'添加商品',icon:'../../static/process/icon1.png',icons:'../../static/process/icon1.png'},
	{name:'团惠包购买',icon:'../../static/process/icon2.png',icons:'../../static/process/icon22.png'},
	{name:'分享车友团',icon:'../../static/process/icon3.png',icons:'../../static/process/icon33.png'},
	{name:'获得奖励',icon:'../../static/process/icon4.png',icons:'../../static/process/icon44.png'},]
</script>

<style scoped lang="less">
	.pross{
		display: flex;
		align-items: center;
		.item{
			width: 120rpx;
			image{
				width: 88rpx;
				height: 88rpx;
			}
			text{
				font-size: 24rpx;
				font-family: PingFangSC;
				color: #666666;
				margin-top: 10rpx;
			}
		}
		.Dotted{
			width: 65rpx;
			border-top: 1px dashed #999;
			margin-bottom: 30rpx;
		}
	}
</style>